<template>
  <div>这是详情页</div>
  <p>id: {{ $route.params.id }}</p>
</template>

<script>
export default {
  // 当从一个详情页跳转到另一个详情页的时候(猜你喜欢)，生命周期不会再次执行
  // 发现组件没发生变化，为了性能考虑，直接复用了原来的组件。就没有销毁和重新创建，不会执行生命周期了
  // 如果这种情况下，需要再次执行生命周期，需要对$route进行watch监听
  mounted() {
    console.log(this.$route);
    console.log(this.$route.params.id);
  },
  watch: {
    $route() {
      console.log(this.$route.params.id);
    },
  },
};
</script>
